<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>登录日志</title>
		<link href="../../static/component/pear/css/pear.css" rel="stylesheet" th:href="@{/static/component/pear/css/pear.css}"/>
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<label class="layui-form-label">登录地址</label>
						<div class="layui-input-inline" style="width: 150px;">
							<input type="text" name="loginLocation" placeholder="登录地址" class="layui-input">
						</div>
						<label class="layui-form-label">登录名称</label>
						<div class="layui-input-inline" style="width: 150px;">
							<input type="text" name="loginName" placeholder="登录名称" class="layui-input">
						</div>
						<label class="layui-form-label">登录状态</label>
						<div class="layui-input-inline" style="width: 100px;">
							<select name="status">
								<option value="">所有</option>
								<option value="0">成功</option>
								<option value="1">失败</option>
							</select>
						</div>
						<label class="layui-form-label">登录时间</label>
						<div class="layui-input-inline" >
							<input type="text" name="create_time" id="date"  placeholder="开始时间" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-mid">-</div>
						<div class="layui-input-inline">
							<input type="text" name="end_time" id="date1" placeholder="结束时间" autocomplete="off" class="layui-input">
						</div>
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="logininfor-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="logininfor-table" lay-filter="logininfor-table"></table>
			</div>
		</div>
		<script type="text/html" id="logininfor-status">
		{{#if (d.status == 0) { }}
		<button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-green">成功</button>
			{{# }else if(d.status == 1){ }}
		<button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger">失败</button>
				{{# } }}
		</script>

		<script type="text/html" id="logininfor-createTime">
		{{layui.util.toDateString(d.create_time, 'yyyy-MM-dd HH:mm:ss')}}
		</script>

		<div style="display: none;">
			<div class="layer-top">
				<br />
				<h3>上侧弹层内容...</h3>
			</div>
		</div>

		<script src="../../static/component/layui/layui.js" th:src="@{/static/component/layui/layui.js}"></script>
		<script src="../../static/component/pear/pear.js" th:src="@{/static/component/pear/pear.js}"></script>
		<script>
			layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown','laydate'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let drawer = layui.drawer;
				let dropdown = layui.dropdown;
				let laydate = layui.laydate;
				//日期
				laydate.render({
					elem: '#date'
				});
				laydate.render({
					elem: '#date1'
				});

				let cols = [
					[
						{
							title: '访问编号',
							field: 'infoId',
							align: 'center',
							width: 100
						},
						{
							title: '登录名称',
							field: 'loginName',
							align: 'center'
						},
						{
							title: '登录地址',
							field: 'ipaddr',
							align: 'center',
							width: 100
						},
						{
							title: '登录地点',
							field: 'loginLocation',
							align: 'center'
						},
						{
							title: '浏览器',
							field: 'browser',
							align: 'center'
						},
						{
							title: '操作系统',
							field: 'os',
							align: 'center'
						},
						{
							title: '登录状态',
							field: 'status',
							align: 'center',
							width: 100,
							templet: '#logininfor-status'
						},
						{
							title: '操作信息',
							field: 'msg',
							align: 'center'
						},
						{
							title: '登录时间',
							field: 'create_time',
							align: 'center',
							width: 200,
							templet: '#logininfor-createTime'
						}
					]
				]

				table.render({
					elem: '#logininfor-table',
					url: '/system/logininfor/logininforquery',
					method:'post',
					page: true,
					limits: [5,10,15,20],
					limit: 5, //每页默认显示的数量
					cols: cols,
					skin: 'line',
					parseData:function(res){
						return {
							"code" : res.code, //解析接口状态
							"msg" : res.msg, //解析提示文本
							"data" : res.data.records, //解析数据列表
							"count" : res.data.total
						}
					}
				});

				form.on('submit(logininfor-query)', function(data) {
					table.reload('logininfor-table', {
						where: data.field
					})
					return false;
				});
			})
		</script>
	</body>
</html>
